<template>
    <a-modal
        :title="title"
        width="60%"
        :visible="visible"
        switchFullscreen
        @cancel="handleCancel"
        class="printData"
        :dialog-style="{ top: '5px'}"
    >

        <template slot="footer">
            <a-button key="back" @click="handleCancel">
                关闭
            </a-button>
            <a-button type="primary" v-print="'#printContent'">
                打印
            </a-button>
        </template>

        <div class="text-white extra-item" v-if="showCodeInfo" >
            <a
                class="box1-item"
                v-for="(item, index) in menu"
                :class="{ 'red-link':index === isActive }"
                v-on:click.stop.prevent='switchTab(index)'>
                {{ item }}
            </a>
        </div>


        <div v-if="itemData" style="background: #f5f5f5;">
            <div class="qrCodes" ref="qrCodeUrl" style="display: none;"></div>
            <section ref="print" id="printContent" class="abcdefg">
                <img src="@assets/img/back/zheng2.jpg" style="width: 100%;"/>
                <div style="position: absolute;top: 10%;width: 74%;">
                    <div class="print-header" >
                        <div class="print-title" style="text-align: center;">医疗废物信息化管理采集证</div>
                        <div style="color: #577449 !important;font-weight: bolder;font-size: 14px;margin-top: 10px;margin-bottom: 20px;" >(版本2.0)</div>
<!--                        <img src="@assets/img/back/zheng-header.png" style="width: 90%;margin-top: -14%;"/>-->
                    </div>
                    <!--签字-->
                    <div>
                        <a-col :span="24">
                            <div class="sign" style="text-align: left;height: inherit">
                                <a-col :span="24">
                                <span class="print-name">
                                    单位名称：
                                </span>
                                    <span class="print-value">
                                    {{itemData.customerName || ''}}
                                </span>
                                </a-col>
                                <a-col :span="24" style="margin-top: 20px">
                                <span class="print-name" style=" letter-spacing: 4px;">
                                    医废负责人：
                                </span>
                                    <span class="print-value" style="margin-left: 0.5px">
                                    {{itemData.leadername || ''}}
                                </span>
                                </a-col>
                                <a-col :span="24" style="margin-top: 20px">
                                <span class="print-name">
                                    经营地址：
                                </span>
                                    <span class="print-value">
                                    {{itemData.province || ''}}{{itemData.city || ''}}{{itemData.area || ''}}{{itemData.address || ''}}
                                </span>
                                </a-col>
                                <a-col :span="24" style="margin-top: 20px">
                                <span class="print-name">
                                    机构类型：
                                </span>
                                    <span class="print-value">
                                    {{$config.getOrgLevel(itemData.organizationLevel)['label']}}
                                </span>
                                </a-col>
                                <a-col :span="24" style="margin-top: 20px">
                                <span class="print-name">
                                    监管类别：
                                </span>
                                    <span class="print-value">
                                    {{$config.getOrgSupervise(itemData.organizationSupervise)['label']}}
                                </span>
                                </a-col>
                            </div>
                        </a-col>
<!--                        <a-col :span="8" style="text-align: right;display: flex;justify-content: flex-end;align-items: flex-end;">-->
<!--                            <div style="margin-right: 30px;display: flex;flex-direction: column;align-items: center;justify-content: center;">-->
<!--                                <div style="width: 85px;height: 85px;border: 0.5px solid #888;display: flex;justify-content: center;align-items: center;border-radius: 50%" >-->
<!--                                    <img src="@assets/img/back/jia.png" style="width: 50%;"/>-->
<!--                                </div>-->
<!--                                <div class="print-text" style="margin-top: 40px; letter-spacing: 6px;width: 100%;">RFID识别区</div>-->
<!--                            </div>-->
<!--                            <span class="sign" style="text-align: left;">-->
<!--                                <img :src="qrcodeImgUrl" alt="" style="width: 160px;height: 160px;"/>-->
<!--                                <div class="print-text" style="margin-top: 5px;width: 160px;word-break: break-all;white-space: normal;">机构码：{{isActive == 0 ? itemData.customerNumber : itemData.bnkMunicipalId  || '&#45;&#45;'}}</div>-->
<!--                            </span>-->
<!--                        </a-col>-->
                    </div>
                    <a-col :span="24" style="margin-top: 20px;">
                        <div class="sign" style="text-align: left;height: inherit">
                            <span class="print-name">证书说明：</span>
                            <span class="print-value">
                                为全面贯彻落实贵州省《关于加快推进全省医疗废物可追溯信息化管理工作的通知（黔环综合[2021]20号）》及各地政策法律法规要求，特制作此证，用于贵州省固体废物管理平台医疗废物数据采集及监管工作。
                            </span>
                        </div>
                    </a-col>
                    <a-col :span="24" style="margin-top:80px;;display: flex;justify-content: space-between;">
                        <div style="margin-right: 30px;display: flex;justify-content: space-between;">
                            <div class="sign" style="text-align: left;margin-right: 20px">
                                <img :src="qrcodeImgUrl" alt="" style="width: 160px;height: 160px;"/>
                                <div class="print-text" style="margin-top: 5px;width: 160px;word-break: break-all;white-space: normal;">机构码：{{isActive == 0 ? itemData.customerNumber : itemData.bnkMunicipalId  || '--'}}</div>
                            </div>
                            <span class="sign" style="text-align: center;margin-top: 74px;">
                                <div style="width: 85px;height: 85px;border: 0.5px solid #888;display: flex;justify-content: center;align-items: center;" >
                                    <img src="@assets/img/back/jia.png" style="width: 50%;"/>
                                </div>
                                <div class="print-text" style="margin-top: 10px;width: 100%;">RFID识别区</div>
                            </span>
                       </div>

                        <div class="signature">
                            <div class="zhang">
                                <img src="@assets/img/back/zhang.png"
                                     style="width: 180px;position: absolute;opacity: 0.6;margin-top: -10%;margin-left: 3%;"/>
                                <div class="print-name-sign" style="letter-spacing: 2.4px;">贵州鸿创信息科技有限公司制</div>
                            </div>
                            <div class="print-name-sign" style="letter-spacing: 2px;">发证日期：{{new Date().Format('yyyy年MM月dd日')}}</div>
                        </div>
                    </a-col>

                </div>
            </section>
        </div>
    </a-modal>
</template>

<script>
import QRCode from 'qrcodejs2'

export default {
    data() {
        return {
            itemData: null,
            qrcodeImgUrl: '',
            title: '打印《医疗废物信息登记证》',
            isActive: 0,
            menu: ['省固废编码登记证', '市固废编码登记证'],
            visible: false,
            disableSubmit: false
        }
    },
    computed:{
        // 是否显示省/市固废编码信息的筛选条件
        showCodeInfo(){
            let state = false;
            let itemData = this.itemData
            // 贵阳市的既有省固废编号也有市固废编号
            if(itemData.cityCode && itemData.cityCode == '520100'){
                state = true;
            }
            return state;
        },
    },

    methods: {
        // 机构省固废信息
        creatQrCode(item) {
            this.visible = true
            this.itemData = item
            console.log('itemData',this.itemData)
            setTimeout(() => {
                let ref = this.$refs.qrCodeUrl
                if (ref) {
                    let dom = document.getElementsByClassName('qrCodes')
                    if (dom && dom[0]) {
                        dom[0].innerHTML = ''
                    }
                    // let text = `${item.customerName}|${item.customerNumber}`;
                    let text = encodeURI(`bnkhospital_${item.customerNumber}_${item.customerName}`)
                    new QRCode(ref, {
                        text, // 需要转换为二维码的内容
                        // width: 200,
                        // height: 200,
                        colorDark: '#000000',
                        colorLight: '#ffffff',
                        correctLevel: QRCode.CorrectLevel.H
                    })
                    setTimeout(() => {
                        let item = document.getElementsByClassName('qrCodes')[0].getElementsByTagName('img')[0]
                        if (item) {
                            this.qrcodeImgUrl = item.currentSrc
                        }
                    }, 500)

                }
            }, 500)

        },
        // 机构市固废信息
        creatCityQrCode(item) {
            this.visible = true
            this.itemData = item
            console.log('itemData',this.itemData)
            setTimeout(() => {
                let ref = this.$refs.qrCodeUrl
                if (ref) {
                    let dom = document.getElementsByClassName('qrCodes')
                    if (dom && dom[0]) {
                        dom[0].innerHTML = ''
                    }
                    let text = encodeURI(`bnkhospital_${item.bnkMunicipalId}_${item.customerName}`)
                    new QRCode(ref, {
                        text, // 需要转换为二维码的内容
                        // width: 200,
                        // height: 200,
                        colorDark: '#000000',
                        colorLight: '#ffffff',
                        correctLevel: QRCode.CorrectLevel.H
                    })
                    setTimeout(() => {
                        let item = document.getElementsByClassName('qrCodes')[0].getElementsByTagName('img')[0]
                        if (item) {
                            this.qrcodeImgUrl = item.currentSrc
                        }
                    }, 500)
                }
            }, 500)

        },
        handleCancel() {
            this.$emit('close')
            this.visible = false
            this.isActive = 0
        },
        // a标签改变的方法
        switchTab: function(index) {
            this.isActive = index;
            if(index == 0){
                this.creatQrCode(this.itemData)
            }else if(index == 1){
                this.creatCityQrCode(this.itemData)
            }
        },
    }
}
</script>

<style lang="less" scoped>
.extra-item {
    display: inline-block;
    margin: 5px 5px 20px;
    .box1-item{
        border: 1px #FFFFFF solid;
    }
    a {
        margin-left: 20px;
        font-size: 15px;
        padding: 10px;
    }
    .red-link {
        color: #4AC347;
    }
}
.bg-theme15{
    .box1-item{
        border: 1px #cccccc solid;
    }

    .red-link {
        background: #577449;
        color: #FFFFFF;
    }
}

@media print {
    html,
    body {
        height: inherit;
    }
}
.signature{
    margin-top: 140px;
}
/*update_end author:scott date:20191203 for:打印机打印的字体模糊问题 */
.abcdefg {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.abcdefg .ant-card-body {
    margin: 0;
    border: none;
    min-width: 800px;
    color: #000000 !important;
}

.ant-card-body {
    padding: 0;
}

.print-header{
    /*background-image: url(~@assets/img/back/zheng-header.png);*/
    /*background-size: contain;*/
    /*background-repeat: no-repeat;*/
    color: #577449 !important;
    letter-spacing: 2px;
    text-align: center;
}

.print-title {
    font-size: 36px;
    font-weight: 800;
    color: #577449 !important;
    letter-spacing: 8px;
    margin-bottom: 20px;
    font-family: 'Source Han Serif CN';
}

.print-name {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 9.8px;
    color: #1A1311;
    font-family: 'Source Han Serif CN';
}
.print-name-sign{
    font-size: 15px;
    font-weight: 600;
    color: #1A1311;
    margin-bottom: 10px;
    font-family: 'Source Han Serif CN';
}
.print-value {
    font-size: 20px;
    font-weight: 500;
    color: #1A1311;
    margin-left: -10px;
    letter-spacing: 4px;
    line-height: 35px;
}

.print-address {
    font-size: 18px;
    font-weight: 600;
    //padding-right: 10%;
    letter-spacing: 4px;
    color: #1A1311;
}

.print-text {
    font-size: 14px;
    white-space: nowrap;
    color: #1A1311;
    width: 150px;
    word-break: break-word;
}

.print-type {
    position: absolute;
    top: 6%;
    right: 10%;
    font-size: 18px;
}

.explain {
    text-align: left;
    margin-left: 50px;
    color: #000000 !important;
}

.explain .ant-input, .sign .ant-input {
    font-weight: bolder;
    text-align: center;
    border-left-width: 0px !important;
    border-top-width: 0px !important;
    border-right-width: 0px !important;
}

.explain div {
    margin-bottom: 10px;
}

/* you can make up upload button and sample style by using stylesheets */
.ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
}
</style>
